<template>
    <div class="myModal">
        <!-- 黑色遮罩 -->
       <transition name="mask">
          <div class="mask" v-show="value" @click="close"></div>
       </transition>
        <transition name="slide">
          <div class="con" v-show="value" :style="styles" :class="'position-'+position">
            <slot></slot>
        </div>
        </transition>
    </div>
</template>
<script>
export default {
    props:{
        value:Boolean,
        styles:Object,
        position:String

    },
    data() {
        return {
            
        }
    },
    methods: {
        close(){
            this.$emit('input',false)
        }
    },
}
</script>
<style lang="scss" scoped>
.mask{
    position: fixed;
    left:0;
    right:0;
    bottom: 0;
    top:0;
    background: rgb(0, 0, 0,0.5);
    z-index: 999;
}
.con{
    position: fixed;
    background: #fff;
    height: 100vh;
    z-index: 10000;
}
.position-left{
  left:0;
  top:0;
}
.position-right{
  right:0;
  top:0;
}
// 以什么状态进入
.mask-enter{
    opacity: 0;
}
// 进入到某种状态
// .mask-enter-to{
//     opacity: 1;
// }
// // 以什么状态离开
// .mask-leave{
//     opacity: 1;
// }
// 离开到某种状态
.mask-leave-to{
    opacity: 0;
}
.mask-enter-active,.mask-leave-active{
    transition: 1s linear all;
}

// 滑动 以什么状态进入
.slide-enter,.slide-leave-to{
    transform: translate(-187.5px)
}
.slide-enter-active,.slide-leave-active{
    transition: 1s linear all;
}
</style>
